<template>
    <div class="daily">
        <div class="fr">
            <div class="title">周报</div>
            <div class="sention">
                <div class="detailed">
                    本周完成工作
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="today">
                    </el-input>
                </div>
                <div class="detailed">
                    未完成工作
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="uncompelete">
                    </el-input>
                </div>
                <div class="detailed">
                    需协调工作
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="willing">
                    </el-input>
                </div>
                <div class="detailed">
                    备注
                    <el-input v-model="remark" placeholder="请输入内容"></el-input>
                </div>
            </div>
            <div class="enclosure">
                <div class="senEnclosure">
                    图片
                    <div class="boxPhoto">
                        <el-upload
                                action="/api/file"
                                list-type="picture-card"
                                :auto-upload="true"
                                :on-success="handleAvatarSuccess" name="file">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img
                                        class="el-upload-list__item-thumbnail"
                                        :src="file.url" alt=""
                                >
                                <span class="el-upload-list__item-actions">
        <span
                class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
                </span>
                <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
                            </div>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </div>
                </div>
                <div class="detailed">
                    附件
                    <!--                    <el-input v-model="file" placeholder="请输入内容"></el-input>-->
                    <el-upload
                            class="upload-demo"
                            action="/api/file"  :auto-upload="true"
                            :on-success="handleChange" name="file">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </div>
                <div class="detailed">
                    总结
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="summarize">
                    </el-input>
                </div>
                <div class="footer">
                    <el-button type="primary" round @click="upLoad">提交</el-button>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Daily",
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                today: "",
                uncompelete: "",
                willing: "",
                remark: '',
                file: '',
                summarize: '',
                imgurl: ""
            };
        },
        methods: {
            handleChange(response, file, fileList) {
                console.log(response)
                // console.log(file)
                // console.log(fileList)
                this.file = response.data;
            },
            handleAvatarSuccess(response, file, fileList) {
                console.log(response)
                // console.log(file)
                // console.log(fileList)
                this.imgurl = response.data;
            },
            upLoad() {
                // this.$options.methods.handlePictureCardPreview()
                let empid1 = this.$store.state.empid
                let url = "/api/addReport"
                let data = {
                    unfinishedWork: this.uncompelete,
                    workdone: this.today,
                    needHelp: this.willing,
                    remark: this.remark,
                    file: this.file,
                    summarize: this.summarize,
                    img: this.imgurl
                }
                // console.log(this.imgurl)
                // var formData = new FormData()
                // for (let key in data) {
                //     console.log(key)
                //     formData.append(key, data[key])
                // }
                this.$axios({
                    method: "post",
                    url: url,
                    headers: {
                        // "Content-Type": "application/form-data"
                        "Content-Type": "application/json"
                    },
                    // data: formData
                    data:
                        {
                            "empId":empid1,
                            "unfinishedWork": this.uncompelete,
                            "workdone": this.today,
                            "needHelp": this.willing,
                            "remark": this.remark,
                            "file": this.file,
                            "summarize": this.summarize,
                            "img": this.imgurl,
                            systemId:'2002'
                        }

                })
                    .then((res) => {
                        console.log(res)
                    })
                    .catch(res=>{
                        console.log(res)
                    })
            },
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                // this.dialogImageUrl = file.url;
                // this.dialogVisible = true;
                console.log(file.url)
                this.imgurl = file.url
            },
            handleDownload(file) {
                console.log(file);
            }
        }
    }
</script>

<style scoped>
    .daily {
        width: 1000px;
        height: 1000px;
        margin: 0 0 0 25px ;
        box-shadow: 0 0 3px 1px #e4e4e4;
    }

    .fl {
        float: left;
        width: 155px;
        height: 800px;
        border-right: 1px solid #ffffff;
        /*background-color: #C0C0C0;*/
    }

    .fr {
        width: 800px;
        height: 800px;
        /*float: right;*/
        /*background-color: #de7f7f;*/
    }

    .title {
        font-size: 40px;
        font-weight: bold;
        height: 60px;
        border-bottom: 1px solid white;
        margin: 10px;
    }

    .detailed {
        height: 90px;
        font-size: 20px;
        font-weight: bold;
        margin: 10px;
        width: 600px;
        line-height: 40px;
    }

    .enclosure {
        margin: 10px;
        font-size: 20px;
        font-weight: bold;
        line-height: 35px;
    }

    .footer {
        width: 75%;
        height: 30px;
        font-size: 30px;
        text-align: center;
        /*margin: 10px 0;*/
        padding:10px;
    }
</style>
